<template>
      <div id="main" class="c-f" :style="{'max-height':slide_h+'px','height':slide_h+'px'}" style="overflow-y: auto">
        <div>12312</div>
      </div>
</template>
<script>
  const NavBar = () =>
    import ('@/components/header/Navbar');
  import IMMessage from '@/utils/im/IMMessage';
  export default {
    name: "imService",
    components: {
      'NavBar': NavBar,
    },
    props:['imshow'],
    data() {
      return {
        navinfo: {
          title: '在线客服',
          leftText: '关闭',
          leftIcon: '',
          leftLink: '',
          rightText: '',
          rightIcon: '',
          rightLink: 'showpop'
        },
        slide_h: (window.document.body.offsetHeight - 46-50),
        cmdLen:this.$store.getters.getValForKey("cmdLen"),
        CMD:this.$store.getters.getValForKey("CMD"),
        CMDHander:this.$store.getters.getValForKey("CMDHander"),
        CMDReverse:{},
        msg: "",
      }
    },
    methods: {
      init(){
        this.initCMDReverse();
        this.$store.state.ws.onmessage = (event, ws) => {
          var arrayBuffer = event.data;
          // console.log('receive data: ', arrayBuffer, ws)
          var uint8array = null;
          var firstbyte = new Uint8Array(arrayBuffer, 0, 2);
          var firstchar = new TextDecoder('utf-8').decode(firstbyte);
          var isZipped = false;
          var isZippedStr = '';
          if (firstchar.indexOf('x') != -1) {
            // 压缩过的
            isZipped = true;
            isZippedStr = '(zipped)';
            var zipedUint8array = new Uint8Array(arrayBuffer, 2);
            uint8array = pako.ungzip(zipedUint8array);
          } else {
            uint8array = new Uint8Array(arrayBuffer);
          }
          var data = new TextDecoder('utf-8').decode(uint8array);
          console.log('receive data' + isZippedStr + ': ' + data)
          if (!data || data.length < this.cmdLen) {
            console.error('data wrong' + isZippedStr + ', the data length must be >= ' + this.cmdLen, data);
            return;
          }
          var commandstr = data.substr(0, this.cmdLen);
          console.log(commandstr);
          var commandName = this.CMDReverse[commandstr];
          if (!commandName) {
            console.error('commandstr is ' + commandstr + isZippedStr + ', but con not find commandName');
            return;
          }
          if (!this.CMDHander[commandName]) {
            console.error('can not found siteImBsHandler, commandName is ' + commandName + isZippedStr);
            return;
          }
          if (data.length > this.cmdLen) {
            var bodyStr = data.substr(this.cmdLen);

            console.log('received:' + commandName + isZippedStr + '\r\n, body string is :' + bodyStr);
            var bodyObj = null;
            try {
              bodyObj = JSON.parse(bodyStr);
              console.log(bodyObj);
            } catch (error) {
              console.error(
                'can not parse to object, commandName is ' +
                commandName +
                isZippedStr +
                ', body string is ' +
                bodyStr
              );
              return;
            }
            // console.log("received " + commandName + ", body string is :" + bodyStr);
            this.CMDHander[commandName](this.$store.state.ws, event, commandName, bodyStr, bodyObj,this.$store);
          } else {
            console.log('received:' + commandName + isZippedStr + ', body string is null');
            this.CMDHander[commandName](this.$store.state.ws, event, commandName, null, null,this.$store);
          }
        };
      },
      initCMDReverse(){
        for (var cmdName in this.CMD) {
          var commandValue = this.CMD[cmdName];
          this.CMDReverse[this.formatCommand(commandValue)] = cmdName;
        }
        console.log(this.CMDReverse);
      },
      tosend(){
        this.sendInfo(this.CMD.P2P_CHAT_REQ,new IMMessage("",this.$store.getters.getUserInfo.id,this.msg));
      },
      sendInfo(command, bodyObj) {
        var commandname = this.CMDReverse[command]; //HEARTBEAT_REQ
        var str = command;
        if (bodyObj) {
          str = command + JSON.stringify(bodyObj);
        }
        console.log('准备发送 ' + commandname + ":'" + str + "'");
        var uint8array = new TextEncoder().encode(str);
        this.$store.state.ws.send(uint8array.buffer);
      },
      formatCommand(command){
        var commandstr = command + "";
        if (commandstr.length < this.cmdLen) {
          var gap = this.cmdLen - commandstr.length;
          var supplystr = "";
          for (var index = 0; index < gap; index++) {
            supplystr += "0";
          }
          if (command < 0) {
            commandstr = "-" + supplystr + commandstr.substring(1);
          } else {
            commandstr = supplystr + commandstr;
          }
        }
        return commandstr;
      },
      onClickLeft() {
        this.$emit("changeimshow");
      }
    },
    beforeCreate: function () {
    },
    created: function () {
    },
    beforeMount: function () {
    },
    mounted(){
      setTimeout(()=>{
        if(this.$store.state.ws!=null){
          this.init();
        }
      },2000)
    },
  }
</script>
<style scoped>
  .circle {
    margin: 0 auto;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    font-size: 16px
  }

  .active {
    background-color: #ef0000;
    color: #fff;
  }

  .numpanel {
    width: 40;
    height: 40px;
    margin-right: 5px;
  }
  .van-nav-bar__title,.van-nav-bar__text,.van-icon {
    color:#ffffff;
  }
  #navbarMain>>>.van-nav-bar__text:active{
    background-color: transparent;
    color:#00aeef;
  }
  #navbarMain>>>.van-nav-bar__text{
    background-color: transparent;
    color:#ffffff;
  }
  #navbarMain>>>.van-icon{
    color:#ffffff;
  }
</style>
